import { useRef } from "preact/hooks";
import SearchPart from "./Search/SearchPart";
import FavoBox from "./Favo/FavoBox";
import FavoFlexBox from "./Favo/FavoFlexBox";
import PresetBar from "./PresetBar";
import SettingDialog from "./SettingUI/SettingDialog";
import { settings } from "./settings";

const HomeScreen = () => {
  const settingDlgReference = useRef(null);

  return (
    <main style={{ paddingTop: `${settings.value.searchPart.top}dvh` }}>
      <SearchPart setting={settingDlgReference} />
      {settings.value.favo.flexBox ? <FavoFlexBox /> : <FavoBox />}
      <PresetBar />
      <SettingDialog ref={settingDlgReference} />
    </main>
  );
};

export default HomeScreen;
